import React from "react";
import "./index.css";


// 商品
import Role from "../pages/Role/Role";
import Goods from "../pages/goods/Goods";








import { Route ,Link, Switch,Redirect} from "react-router-dom";



import { Layout, Menu, } from 'antd';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    MailOutlined,
    
} from '@ant-design/icons';

const { Header, Sider, Content } = Layout;


const { SubMenu } = Menu;

export default class SiderDemo extends React.Component {
    state = {
        collapsed: false,
    };

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };

    render() {
        return (
            <>
            <Layout>

                {/* 侧边栏 */}
                <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
                    {/* <div className="logo" /> */}
                    <Menu theme="dark" mode="inline">
                      
                        <SubMenu key="sub1" icon={<MailOutlined />} title="商品" >
                                <Menu.Item key="1"><Link to="/Role">品牌管理</Link></Menu.Item>
                            <Menu.Item key="2"><Link to="/Goods">商品管理</Link></Menu.Item>
                                
                        </SubMenu>

                    </Menu>
                </Sider>

                {/* 右边区域 */}
                <Layout className="site-layout">

                    {/* 头部 */}
                    <Header className="site-layout-background" style={{ padding: 0, paddingLeft: 10, fontSize: 18 }}>
                        {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                            className: 'trigger',
                            onClick: this.toggle,
                        })}

                        

                    </Header>


                    {/* 内容区 */}
                    <Content
                        className="site-layout-background"
                        style={{
                            margin: '80px 18px',
                            minHeight: 280
                        }}
                    >


                        <Switch>
                        {/* 首页 */}
                        <Redirect exact={true} from="/" to="/Role" ></Redirect>
                                <Route path="/Role" component={Role} />
                        <Route path="/Goods" component={Goods}/>
                                



                        {/* 商品-->品牌管理 */}
                     
                   

                            </Switch>
                    </Content>

                </Layout>
            </Layout>


            </>
        );
    }
}
